<template>
  <el-row>
  <el-col span="8">
    <div
    class="echart"
    ref="onlineChart"
    id="onlineChart"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
  <div class="onlineRate">在线率：<span>{{ onlineRate }}</span></div>
  </el-col>
  <!-- <el-col span="16">
    <div
    class="echart"
    ref="alarmChart"
    id="alarmChart"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
</el-col> -->
</el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Index",
   
  data() {
    return {
      onlineRate:Math.round((335/(335+234))*10000)/100+'%'
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          text: "安全设备在线率显示"
        },
        tooltip: {},
        series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '在线'
        },
        {
          value: 234,
          name: '离线'
        }
      ]
    }
  ]
      };
      const onlineChart = echarts.init(this.$refs.onlineChart);// 图标初始化
      onlineChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        onlineChart.resize();
      });
    },

  }
};
</script>

<style scoped lang="scss">

.onlineRate{
  margin: 230px;
}
</style>

